<template>
  <el-container class="ctr" :class="{ 'folded': folded}">
    <el-header class="header">
      <div class="div1">
        爱购管理系统
      </div>
      <div class="div2">
        <el-dropdown @command="handleCommand">
          <div class="avatar-wrapper">
            <el-avatar  class="user-avatar" icon="el-icon-user-solid"></el-avatar>
            <span class="user_name">{{ user.user_name}}</span>
            <i class="el-icon-caret-bottom"></i>
          </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        </div>
      </el-header>
    <el-container>
      <el-aside class="aside">
        <span @click="folded = !folded" class="btn_fold">
          <i :class="folded ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </span>
        <el-menu
          width=""
          :collapse="folded"
          router
          :default-active="$route.path"
          @open="handleOpen"
          @close="handleClose">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-s-home"></i>
              <span>首页</span>
            </template>
            <el-menu-item index="/console/1-1">仪表盘</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">商品管理</span>
            </template>
            <el-menu-item index="/console/2-1">商品表</el-menu-item>
            <el-menu-item index="/console/2-2">商品类型表</el-menu-item>
            <el-menu-item index="/console/2-3">商品销售表</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">品牌管理</span>
            </template>
            <el-menu-item index="/console/3-1">品牌表</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-goods"></i>
              <span slot="title">订单管理</span>
            </template>
            <el-menu-item index="/console/4-1">订单表</el-menu-item>
            <el-menu-item index="/console/4-2">订单商品表</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-shopping-cart-full"></i>
              <span slot="title">购物车管理</span>
            </template>
            <el-menu-item index="/console/5-1">购物车表</el-menu-item>
            <el-menu-item index="/console/5-2">购物车商品表</el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template slot="title">
              <i class="el-icon-s-tools"></i>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/console/6-1">用户管理</el-menu-item>
            <el-menu-item index="/console/6-2">轮播图管理</el-menu-item>
            <el-menu-item index="/console/6-3">搜索历史管理</el-menu-item>
            <el-menu-item index="/console/6-4">收货地址管理</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="main">
        
        <transition name="fade" mode="out-in">
          <RouterView/>
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import { RouterView } from 'vue-router';

export default {
  data() { 
    return {
      user: {},
      folded: false
    } 
  },
  methods: { 
    handleClick(row) { 
    console.log(row); 
    }, 
    handleOpen() { 
    }, 
    handleClose() { 
    },
  
    handleCommand(command) {
      if(command == "logout") {
        localStorage.removeItem('user')
        this.$router.push({path:"/"})
        this.$message({
          message: '退出登录成功',
          type: 'success'
        });
      }
    }
  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem("user"))
  }

}
</script>
<style scoped>
.header {
  background-color: #589CEF;
  position: fixed;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  line-height: 64px;
  font-weight: 900;
  color: white;
  font-size: larger;
  /* box-shadow: 0px 1px 10px #cecece; */
  border-bottom: 1px solid #e6e6e6;
  z-index: 10;
}


.div2 {
  font-size: 12px;
}


.aside {
  position: fixed;
  width: 220px !important;
  top:60px;
  left:0;
  height: calc(100vh - 60px);
  /* background-color: #545c64; */
  transition: width 0.3s;
  border-right: 1px solid #e6e6e6;
}

.main {
  margin: 60px 0px 0px 220px;
  transition: margin 0.3s;
}

.folded .aside {
  width: 64px !important;
}

.folded .main {
  margin-left: 64px;
}

.el-menu {
  border-right: 0px;
}

.folded .el-menu span{
  display: none;
}
.btn_fold {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  position: fixed;
  width: 220px;
  margin-top: 30px;
  bottom: 0;
  background-color: #363b44;
  color: #fff;
  cursor: pointer;
  font-size: 24px;
  z-index: 9;
  transition: width 0.3s;
}

.folded .btn_fold {
  width: 64px;
  transition: width 0.3s;
}


.avatar-wrapper {
   cursor: pointer;
   display: flex;
   justify-items: center;
   align-items: center;
   color: white;

   .user-avatar {
    margin-right: 10px;
   }
   
   .user_name {
    margin-right: 3px;

   }
}

  /* 定义过渡样式 */
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active for <=2.1.8 */ {
    opacity: 0;
  }

</style>
